<template>
  <div class="Register">
    <div class="register-container">
      <div class="register-wrapper">
        <h4>新用户注册</h4>
        <div class="register-top-title">
          <p>很高兴您将成为商城的会员</p>
        </div>

        <div class="register-input-container">
          <el-input
            placeholder="手机号码"
            suffix-icon="el-icon-mobile"
            v-model="input1"
            class="input"
          ></el-input>
          <el-input
            placeholder="密码"
            v-model="input"
            show-password
            class="input"
          ></el-input>
          <el-input
            placeholder="确认密码"
            v-model="input"
            show-password
            class="input"
          ></el-input>
          <el-input
            placeholder="手机号码"
            suffix-icon="el-icon-s-custom"
            v-model="input1"
            class="input"
          ></el-input>
          <div class="register-button">注册</div>
        </div>
        <p style="font-size: 0.71rem; color: gray; margin-left: 30px">
          忘记密码
        </p>
        <a href="/login" class="register-a">已有账号？立即登录</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1: "", //用户
      input: "", //密码
    };
  },
  methods: {},
};
</script>

<style scoped>
.Register {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding: 1rem;
  display: inline-flex;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.1);
}
.register-container {
  width: 100%;
  height: 90vh;
  border: 0.05rem solid #eee;
  background-color: white;
  box-shadow: 0px 0px 20px #eee;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.register-wrapper{
    width:92%;
    height:80%;
}
.register-top-title {
  width: 100%;
  height: 50px;
  /* background-color: lightskyblue; */
  margin-top: 0.7rem;
  font-size: 0.8rem;
  color: #666;
}
.register-input-container {
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  align-content: center;
  /* justify-content: center; */
  flex-wrap: wrap;
}
.register-input-container .input {
  width: 80%;
  margin: 0.5rem 0rem;
}
.register-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 70%;
  height: 3rem;
  margin-left: 1rem;
  margin-top: 1rem;
  color: #fff;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
}
.register-a {
  color: #549ff9;
  font-size: 0.71rem;
  margin-left: 30px;
}
</style>